<template>
	<view class="page">
		<u-form :model="editForm" :rules="rules" labelWidth="auto" ref="uForm">
			<u-form-item label="培训名称" borderBottom v-if="type == 'train'">
				<u-input v-model="nickname" border="none" placeholder="请输入培训名" maxlength="20" :disabled="true"
					disabledColor="fff" style="overflow:hidden; white-space:nowrap; text-overflow:ellipsis;"
					input-align="right" font-size="28rpx" />
			</u-form-item>
			<u-form-item label="活动名称" borderBottom v-if="type == 'active'">
				<u-input v-model="nickname" border="none" placeholder="请输入活动名" maxlength="20" input-align="right"
					:disabled="true" disabledColor="fff" font-size="28rpx" />
			</u-form-item>
			<u-form-item label="场地名称" borderBottom v-if="type == 'order'">
				<u-input v-model="nickname" border="none" placeholder="请输入场地名" maxlength="20" input-align="right"
					:disabled="true" disabledColor="fff" font-size="28rpx" />
			</u-form-item>
			<u-form-item label="姓名" prop="name" borderBottom>
				<u-input v-model="editForm.name" border="none" placeholder="请输入姓名" :required="true" maxlength="10"
					input-align="right" font-size="28rpx" :placeholder-style="placeholderStyle" />
			</u-form-item>

			<u-form-item label="性别" prop="gender" borderBottom @click="openSex">
				<u-input v-model="sexValue" disabled disabledColor="#ffffff" placeholder="请选择性别" input-align="right"
					font-size="28rpx" :placeholder-style="placeholderStyle" border="none" />
				<u-icon slot="right" name="arrow-right" />
			</u-form-item>
			<u-form-item label="年龄" prop="age" borderBottom>
				<u-input v-model="editForm.age" border="none" placeholder="请输入年龄" :required="true" maxlength="10"
					input-align="right" font-size="28rpx" :placeholder-style="placeholderStyle" />
			</u-form-item>
			<!-- <u-form-item label="报名时间" prop="application_time" borderBottom labelWidth="100" @click="show=true">
				<view class="" style="text-align: right;">{{editForm.application_time||""}}</view>
				<u-icon slot="right" name="arrow-right" @click="show = true" />
			</u-form-item> -->

			<u-form-item label="手机号码" prop="phone" borderBottom>
				<u-input v-model="editForm.phone" border="none" placeholder="请输入手机号码" maxlength="11" input-align="right"
					font-size="28rpx" :placeholder-style="placeholderStyle" />
				<!-- <u-icon slot="right" name="arrow-right" /> -->
			</u-form-item>

			<view class="choose-nickname-row" style="display: flex;justify-content: space-between;">
				<input v-model="editForm.code" type="number" placeholder="请输入验证码" />
				<view class='codeinput' @tap.stop="getCode"> 获取验证码 </view>
			</view>
		</u-form>

		<view class="btn">
			<u-button type="primary" shape="circle" text="保存" :throttle-time="1000" @click="handleSubmit" />
		</view>

		<u-datetime-picker :show="show" v-if="value1" v-model="value1" mode="date" @confirm="confirmDate"
			@cancel="show = false"></u-datetime-picker>


		<u-action-sheet :show="showSex" :actions="sexList" round="20" cancel-text="取消" @close="showSex = false"
			@select="sexSelect" />
	</view>
</template>

<script>
	import {
		commonUpload
	} from "@/request/common.js";
	import {
		mySendSms
	} from "@/request/myApi.js";
	import {
		actApplication,
		trainApplication,
		venueApplication
	} from "@/request/homeApi.js";
	export default {
		data() {
			return {
				editForm: {
					id: '',
					name: '',
					sex: '',
					age: '',
					application_time: '',
					phone: '',
					code: ""
				},
				time: null,
				nickname: '',
				type: '',
				value1: null,
				rules: {
					name: {
						type: "string",
						required: true,
						message: "请填写姓名",
						trigger: ["blur", "change"],
					},
					age: {
						type: "number",
						required: true,
						message: "请正确输入年龄",
						trigger: ["blur", "change"],
					},
					sex: {
						type: "number",
						required: true,
						message: "请选择性别",
						trigger: ["blur", "change"],
					},
					// application_time: {
					// 	type: "string",
					// 	required: true,
					// 	message: "请选择报名时间",
					// 	trigger: ["blur", "change"],
					// },
					phone: {
						type: "number",
						required: true,
						message: "请填写手机号",
						trigger: ["blur", "change"],
					},
				},
				show: false,
				sexValue: "", // 性别ID
				showSex: false, // 性别弹窗
				sexList: [
					// 性别列表
					{
						name: "男",
						value: 1
					},
					{
						name: "女",
						value: 2
					},
				],
				placeholderStyle: {
					fontSize: "28rpx",
					color: "#D9D9D9",
				},
				time: '',
				Id: ''
			};
		},
		onReady() {
			//兼容微信小程序，只能通过setRules方法设置。
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad(v) {
			this.Id = v.Id
			this.type = v.type
			this.editForm.id = v.id
			this.editForm.application_time = v.application_time
			this.nickname = v.nickname
			if (v.time) this.time = v.time
			if (v) this.value1 = Number(new Date())
			console.log(this.editForm,'iiii')
			wx.setNavigationBarTitle({
				title: '预定详情'
			})
		},
		methods: {
			getTime() {
				let time = Number(new Date())
				this.$set(this.editForm, 'application_time', this.$TimeFormat(time,'yyyy-mm-dd hh:MM:ss'))
			},

			// 获取验证码
			getCode() {
				if (!this.editForm.phone) {
					uni.showToast({
						title: "手机号不能为空",
						icon: "none",
					});
					return;
				}
				if (!/^1[3-9]\d{9}$/.test(this.editForm.phone)) {
					uni.showToast({
						title: "手机号格式有误",
						icon: "none",
					});
					return;
				}
				mySendSms({
					mobile: this.editForm.phone,
					event: "order",
				}).then((res) => {
					if (res.code == 200) {
						uni.showToast({
							title: res.msg,
							icon: "none",
						});
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none",
						});
					}
				});
			},
			// 选择生日
			confirmDate(e) {
				this.show = false
				this.value1 = this.$TimeFormat(e.value, 'yyyy-mm-dd')
				this.$set(this.editForm, 'application_time', this.$TimeFormat(e.value, 'yyyy-mm-dd'))
			},
			// 提交修改
			handleSubmit() {
				if(this.type != 'order'){
					this.getTime()
				}
				
				this.$refs.uForm.validate().then(() => {
					if (this.type == 'active') {
						this.$set(this.editForm, 'activity_lists_id', this.editForm.id)
						delete this.editForm.id
						actApplication(this.editForm).then((res) => {
							if (res.code == 200) {
								uni.showToast({
									title: res.msg,
									icon: "none",
								});
								setTimeout(() => {
									uni.navigateBack({
										delta: 1
									});
								}, 1500);
							} else {
								uni.showToast({
									title: res.msg,
									icon: "none",
								});
							}
						});
					} else if (this.type == 'train') {
						this.$set(this.editForm, 'train_lists_id', this.editForm.id)
						delete this.editForm.id
						trainApplication(this.editForm).then((res) => {
							if (res.code == 200) {
								uni.showToast({
									title: res.msg,
									icon: "none",
								});
								setTimeout(() => {
									uni.navigateBack({
										delta: 1
									});
								}, 1500);
							} else {
								uni.showToast({
									title: res.msg,
									icon: "none",
								});
							}
						});
					} else {
						// 场地
						this.$set(this.editForm, 'venue_site_id', this.editForm.id)
						// 场馆
						this.$set(this.editForm, 'venue_lists_id', this.Id)
						this.$set(this.editForm, 'time', this.time)
						delete this.editForm.id
						venueApplication(this.editForm).then((res) => {
							if (res.code == 200) {
								uni.showToast({
									title: res.msg,
									icon: "none",
								});
								setTimeout(() => {
									uni.navigateBack({
										delta: 1
									});
								}, 1500);
							} else {
								uni.showToast({
									title: res.msg,
									icon: "none",
								});
							}
						});
					}

				});
			},
			// 打开性别选择
			openSex() {
				this.showSex = true;
				uni.hideKeyboard();
			},
			// 选择性别
			sexSelect(val) {
				console.log(val, 'val')
				this.editForm.sex = val.value;
				this.sexValue = val.name;
			},
			// 上传头像
			upLoadAvatar() {
				uni.chooseImage({
					count: 1, // 单选
					sizeType: ["original"],
					sourceType: ["album", "camera"], //相册 相机
					success: (res) => {
						commonUpload(res.tempFilePaths[0]).then((res) => {
							if (res.code == 1) {
								this.editForm.avatar = res.data.fullurl;
							} else {
								uni.showToast({
									title: res.msg,
									icon: "none",
								});
							}
						});
					},
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.page {
		padding: 20rpx 38rpx;

		.choose-nickname-row {
			width: 100%;
			height: 5%;
			text-align: left;
			padding: 26px 2px 8px;
			font-size: 30rpx;
			margin: 0 auto;
			border-bottom: 3rpx solid #F2F2F2;
			vertical-align: center;

			/deep/.input {
				color: #000;
			}

			.codeinput {
				color: #466EC5;
				width: 180rpx;
			}
		}

		.btn {
			position: fixed;
			bottom: 100rpx;
			left: 30rpx;
			right: 30rpx;
		}

		/deep/ .u-button {
			background: #466EC5;
			border-color: transparent;
		}

		/deep/ .u-form-item__body__right {
			color: #303133;
		}

		/deep/ .u-form-item__body {
			padding: 28rpx 0;
		}

		/deep/ .u-line {
			border-color: #D9D9D999;
		}
	}
</style>